<template>
	<!--余额充值-->
	<view>
		<view class="bg-img bg-white nbys">
			<view class="text-white text-center text-sm padding-top-lg">账户余额</view>
			<view class="text-white text-center">
				<text class="">￥</text>
				<text class="text-bold" style="font-size:60rpx;">{{balance}}元</text>
			</view>
		</view>
		<view class="operating_box" style="margin-top:-90rpx;margin-bottom:20rpx;">
			<view class="padding-sm text-black">请选择充值面额</view>
			<view class="flex text-center padding-top-sm">
				<view class="flex-sub">
					<button :class="index==1?'txzys':''" @tap="tabSelect" :data-id="1" :data-num="5"
						class="cu-btn line-gray text-black">充5元</button>
				</view>
				<view class="flex-sub">
					<button :class="index==2?'txzys':''" @tap="tabSelect" :data-id="2" :data-num="10"
						class="cu-btn line-gray text-black">充10元</button>
				</view>
				<view class="flex-sub">
					<button :class="index==3?'txzys':''" @tap="tabSelect" :data-id="3" :data-num="20"
						class="cu-btn line-gray text-black">充20元</button>
				</view>
			</view>
			<view class="flex text-center padding-top-lg">
				<view class="flex-sub">
					<button :class="index==4?'txzys':''" @tap="tabSelect" :data-id="4" :data-num="30"
						class="cu-btn line-gray text-black">充30元</button>
				</view>
				<view class="flex-sub">
					<button :class="index==5?'txzys':''" @tap="tabSelect" :data-id="5" :data-num="40"
						class="cu-btn line-gray text-black">充40元</button>
				</view>
				<view class="flex-sub">
					<button :class="index==6?'txzys':''" @tap="tabSelect" :data-id="6" :data-num="50"
						class="cu-btn line-gray text-black">充50元</button>
				</view>
			</view>
			<view class="padding-top-lg">
				<view class="cu-form-group">
					<view class="title">其他金额</view>
					<input class="uni-input-input" type="number" @input="getN" value="" placeholder="请输入其他你要充值的金额"
						name="input"></input>
				</view>
			</view>
		</view>
		<view class="padding-sm">注意充值金额，充值之后概不退款，够用即可！</view>
		<view class="foot">
			<button type="button" class="cu-btn block bg-blue lg" @tap="czhi()">充值</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				index: 0,
				je: 0,
				orderNum: '',
				balance: 0.00
			}
		},
		onLoad(options) {
			this.balance = options.balance;
		},
		methods: {
			tabSelect(e) {
				this.index = e.currentTarget.dataset.id;
				this.je = e.currentTarget.dataset.num;
			},
			getN(e) {
				this.index = 0;
				this.je = e.detail.value;
			},
			czhi() {
				let that = this;
				if (this.je == 0 || this.je == null || this.je == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入金额'
					});
					return;
				}
				//window.location.href = 'http://evcssappapi.yushengkeji.cn/user/v1/recharge?money='+that.je;
				that.http.tokenreq({
					url: 'user/v1/recharge',
					data: {"money": that.je}
				}).then((res) => {
					let e = res.data;
					console.log("e=" + JSON.stringify(e));
					if (e.code == 0 && e.success) {
						that.pay(e.data);
					}
				})
			},
			pay(data) {
				if (typeof WeixinJSBridge == "undefined"){
					if( document.addEventListener ){
						document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady(data), false);
					}else if (document.attachEvent){
						document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady(data));
						document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady(data));
					}
				}else{
					this.onBridgeReady(data);
				}
			},
            onBridgeReady(data){
				//"data":{"appId":"wxc12e65ecba8895fc","timeStamp":"1618902047",
				//"nonceStr":"1690F535142A97D59E0766812CCF93C6",
				//"package":"prepay_id=wx20150047498196e5e137285674a30a0000",
				//"signType":"MD5","paySign":"5AF18222CA18A82E6CF020038DDD10B1"}}
				WeixinJSBridge.invoke('getBrandWCPayRequest',
					{
						"appId": data.appId, //公众号名称，由商户传入
						"timeStamp": data.timeStamp, //时间戳，自1970年以来的秒数
						"nonceStr": data.nonceStr, //随机串
						"package": data.package,
						"signType": data.signType, //微信签名方式：
						"paySign": data.paySign //微信签名
					},
					function(res2){
						uni.showToast({
							icon: 'none',
							title: JSON.stringify(res2)
						});
						//alert(JSON.stringify(res2))
						if(res2.err_msg == "get_brand_wcpay_request:ok" ){
							// 使用以上方式判断前端返回,微信团队郑重提示：
							//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
						    setTimeout(()=>{
						    	uni.navigateTo({
						    		url: "/pages/user/wallet/wallet"
						    	})
						    },100)
					    }else{
							setTimeout(()=>{
								uni.navigateTo({
									url: "/pages/user/wallet/wallet"
								})
							},100)
						}
				});
			}

		}
	}
</script>

<style>
	page {
		background-color: #FFFFFF;
	}

	uni-view {
		font-size: 14px;
		line-height: 1.5;
	}

	.nbys {
		background-image: url(../../../common/img/beiing.png);
		width: 100%;
		height: 300rpx;
	}

	.cu-btn {
		padding: 40rpx 40rpx;
	}

	/* .inpys{
		border:2rpx solid #F1F1F1;
		text-align: left;
		padding:40rpx 0rpx;
	} */
	.uni-input-input {
		border: 2rpx solid #F1F1F1;
		text-align: left;
		padding: 20rpx 10rpx;
	}

	.foot {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
	}

	.txzys {
		background-color: #0081FF;
		color: white;
	}
</style>
